<template>
    <div class="car-card">
        <div class="mui-card" v-for="(item,i) in carList" :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <div>
                        <mt-switch v-model="$store.getters.selectedGoodList[item.id]" @change="switchShop(item.id,$store.getters.selectedGoodList[item.id])"></mt-switch>
                    </div>
                    <div class="class-img">
                        <img :src="item.thumb_path" alt="">
                    </div>
                    <div>
                        <h5>{{ item.title }}</h5>
                        <p>
                            <span>￥{{ item.sell_price }}</span>
                            <!--调用计算商品数量模板-->
                            <setcount :setGoodsCount="$store.getters.getSetGoodsCount[item.id]" :id="item.id"></setcount>
                            <a @click.prevent="removeGoodsList(item.id,i)">删除</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner goods-price">
                    <div>
                        <p>总计（不含运费）：<span>￥{{ $store.getters.allPrice.all_amount }}</span></p>
                        <p>已勾选商品<span>{{ $store.getters.allPrice.selNum }}</span>件，总价：<span>￥{{ $store.getters.allPrice.amount }}</span></p>
                    </div>
                    <!--去结算-->
                    <mt-button type='danger' size='small'>去结算</mt-button>
                </div>
            </div>
        </div>
        <div></div>
    </div>
</template>

<script>
    //导入结算页面计算商品数量组件
    import setcount from'../subComment/setCount.vue'
    import { Toast } from 'mint-ui'
    export default {
        data() {
            return {
                carList:[],
            }
        },

        created(){
            this.getCarList();
        },

        methods:{
            //获取结算页面商品列表的数据
            getCarList:function(){
                var params = [];
                if(this.$store.state.car.length <= 0){
                    return;
                }
                this.$store.state.car.forEach(item => {
                    params.push(item.id);
                });
                this.$http.get('api/goods/getshopcarlist/'+params.join(',')).then(result =>{
                    if(result.body.status === 0){
                        this.carList = result.body.message
                        console.log(this.carList);
                    }else{
                        Toast({
                            message: '获取商品列表数据失败',
                            position: 'middle',
                            duration: 2000
                        });
                    }
                });
            },
            //删除商品
            removeGoodsList:function(_id,index){
                this.carList.splice(index,1);//根据index索引删除对应的列表
                this.$store.commit('removeGoodsList',_id);
            },

            //开关
            switchShop:function(id,val){
                this.$store.commit('switchGoodsList',{
                    id:id,
                    val:val,
                });
            },


        },

        components:{
            setcount
        }
    }
</script>

<style lang="less">
    .car-card{
        .mui-card-content-inner{
            padding: 15px 8px;
            display: flex;
            justify-content: space-between;
            div{
                max-height: 64px; 
                justify-content: space-between;
                margin-right: 6px;
                &:last-of-type{
                    margin-right: 0;
                }
                .mint-switch{
                    margin-top: 12px;
                }  
                &:nth-of-type(3){
                    width: 218px;
                }        
                h5{
                    display: block;
                    height: 28px;
                    font-size: 12px;
                    font-weight: 500;
                    color: #000;
                    margin-top: 0;
                    margin-bottom: 4px;
                }
                p{
                    display: flex;
                    span{
                        color: red;
                        font-size: 15px;
                        padding-right: 4px;
                    }
                    span,a{
                        line-height: 30px;
                    }
                    a{
                        padding-left: 4px;
                    }
        
                }
            }
        }
        .class-img{
            img{
                width: auto;
                max-height: 54px;
            }
            
        }
        .goods-price{
            p{
                line-height: 30px;
                margin-bottom: 0;
                span{
                    color: red;
                    font-size: 16px !important;
                    font-weight: bold;
                    padding-right: 2px !important;
                    padding-left: 2px !important;
                }
            }
        }
        .mint-button--small {
            padding: 0 20px;
            height: 36px;
            margin-top: 10px;
        }
        .mui-numbox{
            width: 114px;
        }
    }
    
</style>
